import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { addNavigationHelpers, StackNavigator } from 'react-navigation'

import Tab from './tab'
import Product from '../product/product'
import Animate from '../product/animate'
import Login from '../login/login'
import TableView from '../home/tableView'
// import Bulk from '../bulk/bulk'

export const Navigator = StackNavigator(
  {
    Home: { screen: Tab },
    Bulk: { screen: Tab },
    Center: { screen: Tab },
    Login: { screen: Login },
    Animate: { screen: Animate },
    TableView: { screen: TableView },
    Product: { screen: Product }
  },
  {
    navigationOptions: {
      headerBackTitle: null,
      headerTintColor: '#333333',
      showIcon: true,
      swipeEnabled: false,
      animationEnabled: false
    },
    mode: 'card'
  })

const AppWithNavigationState = ({ dispatch, nav }) => (
  <Navigator navigation={addNavigationHelpers({ dispatch, state: nav })} />
)

AppWithNavigationState.propTypes = {
  dispatch: PropTypes.func.isRequired,
  nav: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
  nav: state.nav
})

export default connect(mapStateToProps)(AppWithNavigationState)

// export default Navigator
